<template>
  <div class="search-list-main">
    <Nav @changeTab="getData"></Nav>
    <div class="search-list" v-if="searchList.length">
      <div class="search-item" v-for="item in searchList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
        <span>{{ item.title }}</span>
        <div class="search-text">
          <h6 class="price">￥{{ item.price }}</h6>
          <h6 class="btn">立即购买</h6>
        </div>
      </div>
    </div>
    <div v-else>暂无数据......</div>
  </div>
</template>

<script>
export default {
  name: "SearchList",
  data() {
    return {
      searchList: [],
    };
  },
  // created() {
  //   this.getData();
  // },
  methods: {
    async getData(sortKey, orderBy) {
      let res = await this.$http.getSearchList(this.$route.query.key, {sortKey, orderBy});
      if (res.code == 200) {
        this.searchList = res.data;
      }
    },
  },
  watch: {
    "$route.query.key": {
      immediate: true,
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.search-list-main {
  .search-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.1333rem;
    margin-top: 0.1333rem;
    justify-content: space-between;

    .search-item {
      width: calc(50% - 0.0667rem);
      font-size: 0.4267rem;
      margin-bottom: 5px;
      background-color: #fff;

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inherit;
      }

      img {
        width: 100%;
      }
      .search-text {
        margin-top: 0.1333rem;
        display: flex;
        justify-content: space-between;

        .price {
          color: #95111c;
        }
        .btn {
          background-color: #95111c;
          color: #fff;
          width: 1.6rem;
          height: 0.5333rem;
          border-radius: 0.1333rem;
          text-align: center;
          line-height: 0.5333rem;
        }
      }
    }
  }
}
</style>